<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="min-width: 700px;">
    <baseTeacherDepartmentAdd @onSubmit="onSubmit" ref="baseTeacherDepartmentAdd" />
    <el-container>
      <el-main>
        <div class="app-search">
          <el-form :inline="true" class="demo-form-inline" v-model="form"> 
            <el-form-item> 
              <el-button type="success" plain @click="add">批量操作</el-button>
              <el-button type="warning" plain @click="clearAll">一键清空</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="list" style="width: 100%" size="small" :row-class-name="tableRowClassName">
          <el-table-column prop="teacherName" label="人员姓名" />
          <el-table-column prop="teacherNumber" label="人员工号" />
          <el-table-column prop="signStatus" label="是否考勤">
            <template #default="scope">
              <span v-if="scope.row.signStatus == 1">考勤</span>
              <span v-if="scope.row.signStatus == 0">不考勤</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="danger" @click="deleteApp(scope.row)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column label="是否考勤" v-if="type == 1 || type == 2">
            <template #default="scope">
              <el-switch v-model="scope.row.signStatus" @change="switchHandle(scope.row)" :active-value="1"
                :inactive-value="0" />
            </template>
          </el-table-column>
          <template v-slot:empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
        <el-config-provider :locale="locale">
          <el-pagination :total="total" :page-size="pageSize" :current-page="page"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            @size-change="changePageSize" @current-change="changeCurrentPage">
          </el-pagination>
        </el-config-provider>

      </el-main>
    </el-container>
  </el-dialog>
</template>
<script>
import { ref } from "vue";
import baseTeacherDepartmentAdd from "@/components/baseInfo/baseTeacherDepartmentAdd.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture } from "@element-plus/icons-vue";
export default {
  name: "BaseTeacherList",
  data() {
    return {
      type: 0,
      dialogFormVisible: ref(false),
      title: "",
      page: 1,
      departmentId: 0,
      pageSize: 10,
      total: 0,
      limit: 10,
      list: [],
      form: {
        name: "",
        teacherNumber: "",
      },
    };
  },
  components: {
    baseTeacherDepartmentAdd,
    IconPicture,
    ElConfigProvider,
    ElMessageBox,
    ElMessage,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
  mounted() {
    if (window.location.href.includes("?")) {
      this.type = window.location.href.split("?")[1].split("=")[1]
      console.log(window.location.href.split("?")[1].split("=")[1]);
    }
  },
  watch: {
    $route() { },
  },
  methods: {
    formatterSex(row, column) {
      return row.sex == "1" ? "男" : "女";
    },

    closeDialog() {
      // alert(1)
      this.page = 1
      console.log(this.page);
      this.list = []
      this.title = ""
    },

    switchHandle(value) {
      console.log(value);
      let params = new FormData()
      params.append("id", value.id)
      if (value.signStatus == true) {
        params.append("signStatus", 1)
      } else {
        params.append("signStatus", 0)
      }
      httpService(
        "/javaApi/baseTeacherDepartment/edit", params, "post").then((data) => {
          if (data.code == 200) {
            ElMessage.success(data.object);
            this.getBaseTeacherDepartmentList(this.departmentId);
          } else {
            ElMessage.error(data.message);
          }
        });
    },

    add() {
      this.$refs.baseTeacherDepartmentAdd.title = this.title;
      this.$refs.baseTeacherDepartmentAdd.addPath = '/javaApi/baseTeacherSubject/add'
      this.$refs.baseTeacherDepartmentAdd.listByDepartmentId(this.departmentId);
      this.$refs.baseTeacherDepartmentAdd.dialogFormVisible = true;
    },

    deleteApp(obj) {
      ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpService(
            "/javaApi/baseTeacherSubject/deleteById",
            "id=" + obj.id, "post"
          ).then((data) => {
            if (data.code == 200) {
              ElMessage.success(data.object);
              this.getBaseTeacherDepartmentList(this.departmentId);
            } else {
              ElMessage.error(data.message);
            }
          });
        })
        .catch(() => { });
    },

    clearAll() {
      ElMessageBox.confirm("确定要清空所有人员吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          httpService(
            // "/javaApi/baseTeacherDepartment/empty",
            "/javaApi/baseTeacherSubject/deleteByDepartmentId",
            "departmentId=" + this.departmentId,
            "post"
          ).then((data) => {
            if (data.code == 200) {
              ElMessage.success(data.object);
              this.getBaseTeacherDepartmentList(this.departmentId);
            } else {
              ElMessage.error(data.message);
            }
          });
        })
        .catch(() => { });
    },

    onSubmit() {
      this.getBaseTeacherDepartmentList(this.departmentId);
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.pageSize = size;
      this.limit = size;

      this.getBaseTeacherDepartmentList(this.departmentId);
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.page = page;
      this.getBaseTeacherDepartmentList(this.departmentId);
    },
    tableRowClassName({ row, rowIndex }) {
      return "";
    },

    getBaseTeacherDepartmentList(id) {
      this.departmentId = id;
      httpService(
        // "/javaApi/baseTeacherDepartment/list/" +
        "/javaApi/baseTeacherSubject/list/" + this.page + "/" + this.pageSize,
        {
          departmentId: this.departmentId,
        },
        "get"
      ).then((data) => {
        this.list = data.list;
        this.total = Number(data.total);
        this.pageCount = data.pages;
      });
    },

    typeChange() {
      this.type = this.$route.query.type;
    },
  },
};
</script>
<style scoped>
.el-main {
  padding: 0px;
  text-align: left;
}

.teacher-content {
  width: 100%;
}

.app-table {
  background: #eff3f5;
  padding: 10px;
}

.app-separator {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

.app-body {
  background: white;
  padding: 20px 20px 10px 20px;
  margin-bottom: 10px;
  min-height: calc(100vh - 204px);
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
